<template>
	<view class="component" :style="`width:${clientWidth}px;height:${clientHeight}px;`">
		<view v-for="(item,index) in graphicsList">
		  <view class="graphics" :key="index" :style="`left:${item.x}px;top:${item.y}px;`">
			<image src="/static/logo.png" style="width: 30px;height: 30px"></image>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   clientHeight: null,
			   clientWidth: null,
			   // 半径 即图片100*100
			   radius: 50, // 有随机要求可动态生成
			   graphicsList:[]
			};
		},
		onLoad(){
			
		},
		onShow(){
		  this.getClient();
		  this.generate();	
		},
		methods: {
			//  获取可视区域
			getClient(){
			  // 获取html可视区域高度
			  this.clientHeight = document.documentElement.clientHeight - 100  // 预留100px不紧贴屏幕
			  this.clientWidth = document.documentElement.clientWidth - 120  // 预留120px不紧贴屏幕
			},
			// 随机生成图形位置（xy坐标）
			generateLocation(){
			  let x = Math.floor(Math.random()*this.clientHeight) + this.radius  // 加 this.radius 保证图形中心在范围内，后面可少判断一步
			  let y = Math.floor(Math.random()*this.clientWidth) + this.radius
			  return {
				x,
				y,
				r: this.radius
			  }
			},
			// 生成
			generate(){
			  debugger
			  let obj = this.generateLocation()
			  // 判断是否在规定范围内 
			  if(obj.x + obj.r>this.clientHeight){
				return false
			  }
			  if(obj.y + obj.r>this.clientHeight){
				return false
			  }
			  // 判断最新生成的 图片 范围内是否 有其他的图片 
			  debugger
			  if(this.graphicsList.length!==0){
				for(var i in list){
				  // 判断是否在规定范围内 
				  if(list[i].x>= obj.x && list[i].x<= obj.x + (obj.r*2)){
					return false
				  }
				  if(list[i].y>= obj.x && list[i].y<= obj.x + (obj.r*2)){
					return false
				  }
				  if(Number(i)+1==list.length){
					this.graphicsList.push(obj)
				  }
				}
			  }else{
				this.graphicsList.push(obj)
			  }
			},
		  },
	}
</script>

<style lang="scss">
.component {
  position: absolute;

  .demo {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2;

    img {
      position: relative;
      object-fit: contain;
      width: 100px;
      height: 100px;
    }
  }
}
</style>
